import { useEffect, useMemo, useState } from 'react'
import { BASE_PATH } from '@/config'
import { AutoCenter, Button, Grid } from 'antd-mobile'
import requewt from '@/utils/requewt'
import { API } from '@/config/api'
import { navigateTo } from '@/utils'

const GameActions = ({menus,spriteChange,category}) => {

    const [active, setActive] = useState('tiemo') 
    const [activeItem, setActiveItem] = useState('')
    const handleSelect = (index) => {
        setActive(index)
        setActiveItem('')
    }
    const handleAcitveItem = (index) => {
        const current = menus.find(i => i.type === active)
                const { children, type } = current
                if (current.value !== 1) return
        setActiveItem(s => {
            if (s === index) {
                spriteChange({...children[index],type, index}, 'del')
                return ''
            }
            spriteChange({...children[index],type, index}, 'add')
            return index
        })
    }
    const currentTips = useMemo(() => {
        const current = menus.find(i => i.type === active)
        const carComps = ['cejing','chedeng', 'chetie']
        const { type, value, caseNum, uNum } = current
        if (carComps.includes(type)) {
            if (value === 1) {
                return `恭喜您已经成功邀请${caseNum}好友，获得${uNum}U币`
            } 
            return '点击邀请好友入群领取U币并解锁改装配件'
            
        }
        return ''
        
    },[active,menus])
     const gameItem = useMemo(() => {
        console.log(active)
        const current = menus.find(i => i.type === active)
        return current.items
    }, [active])

    const handleConfirm = () => {
        if (activeItem === '') {
            return
        }
        const current = menus.find(i => i.type === active)
        const { children, type } = current
        spriteChange({...children[activeItem],type, index: activeItem})
    }

    return (
        <div className='game-actions'>
                <Grid columns={6}>

                    {
                        menus.map(({label,type}, index) => (
                            <Grid.Item 
                                className={`game-menu-item ${active === type ? 'active' : ''}`} 
                                style={category === '1'&&{fontSize: '1rem'}}
                                key={type}
                                onClick={() => handleSelect(type)}
                                >
                                {label}
                            </Grid.Item>
                        ))
                    }
                </Grid>
                <div
                    className='game-item'
                >
                    <ul>
                        {
                            gameItem.map(({imgUrl,style},index) => (
                                <li key={index} className={`game-item-box ${activeItem === index && 'active'}`} onClick={() => handleAcitveItem(index)}>
                                    <img 
                                    src={imgUrl}
                                    className='icon-item'
                                    style={style}
                                    />
                                </li>
                            ))
                        }
                    </ul>
                    <AutoCenter className='game-item-bottom'>
                        {
                            ['tiemo', 'weiyi','lungu'].includes(active) && <Button className='act-btn act-btn-bevel' onClick={() => {
                                // handleConfirm()
                                navigateTo(`/game/${category}/success`)
                            }}>确认改装</Button>
                        }
                        {
                            ['cejing', 'chedeng','chetie'].includes(active) && <>
                            <AutoCenter>
                                <p style={{color: 'rgb(94, 254, 253)',fontSize: '1.3rem'}}>{currentTips}</p>
                            </AutoCenter>
                            <Grid columns={2} gap={20}>
                                <Grid.Item>
                                    <Button className='act-btn act-btn-bevel' onClick={() => {
                                        navigateTo(`/game/${category}/share`)
                                    }}>
                                        邀 请
                                    </Button>
                                </Grid.Item>
                                <Grid.Item>
                                    <Button  className='act-btn act-btn-bevel' onClick={() => {
                                        // handleConfirm()
                                        navigateTo(`/game/${category}/success`)
                                        
                                    }}>
                                        确认改装
                                    </Button>
                                </Grid.Item>
                            </Grid>
                            </>
                        }
                    </AutoCenter>
                </div>
                
            </div>
    )
}

export default GameActions